<template>
  <view class="publish">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-btn" @click="goBack">
        <wd-icon name="arrow-left" size="20" color="#333" />
      </view>
      <view class="navbar-title">{{ headTitle }}</view>
      <view class="publish-btn" :class="{ 'publish-active': canPublish }" @click="publishPost">
        发布
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 标题输入 -->
      <input
        v-model="title"
        class="title-input"
        type="text"
        placeholder="请输入标题（必填）"
        maxlength="50"
      />
      <view class="char-count">{{ title.length }}/50</view>

      <!-- 内容输入 -->
      <textarea
        v-model="content"
        class="content-input"
        placeholder="请输入正文内容（必填）"
        maxlength="1000"
      />
      <view class="char-count">{{ content.length }}/1000</view>

      <!-- 图片上传 -->
      <view class="image-upload">
        <view class="upload-title">添加图片（选填）</view>
        <view class="upload-grid">
          <view v-for="(image, index) in images" :key="index" class="image-item">
            <image class="preview-image" :src="image" mode="aspectFill" />
            <view class="remove-btn" @click.stop="removeImage(index)">
              <wd-icon name="close" size="14" color="#fff" />
            </view>
          </view>

          <view v-if="images.length < 9" class="upload-btn" @click="chooseImage">
            <wd-icon name="camera" size="24" color="#999" />
            <text>{{ images.length }}/9</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 表单数据
const selectedCategory = ref("activity");
const headTitle = ref("文化内容");

const title = ref("");
const content = ref("");
const images = ref<string[]>([]);
// location 统一为对象类型，初始为 null
const location = ref<{ name: string; address: string; latitude: number; longitude: number } | null>(
  null
);

// 是否可以发布
const canPublish = computed(() => {
  return title.value.trim() !== "" && content.value.trim() !== "";
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths];
    },
  });
};

// 移除图片
const removeImage = (index: number) => {
  images.value.splice(index, 1);
};

// 发布帖子
const publishPost = () => {
  if (!canPublish.value) {
    return;
  }

  // 显示加载提示
  uni.showLoading({
    title: "发布中...",
    mask: true,
  });

  // 构建要发布的数据
  const postData = {
    category: selectedCategory.value,
    title: title.value,
    content: content.value,
    images: images.value,
    location: location.value,
    publishTime: new Date().toISOString(),
  };

  // TODO: 发送数据到服务器
  console.log("发布帖子", postData);

  // 模拟发布过程
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: "功能还未完善",
      icon: "error",
      duration: 2000,
    });
  }, 1500);
};

// 页面加载时获取参数
onLoad((options) => {
  if (options) {
    headTitle.value = options.name;
  }
});
</script>

<style lang="scss">
.publish {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 32rpx;
  font-weight: bold;
}

.publish-btn {
  font-size: 28rpx;
  color: #999;
  padding: 10rpx 20rpx;
}

.publish-active {
  color: #3b8dff;
  font-weight: 500;
}

.content-container {
  flex: 1;
  padding: 20rpx 30rpx;
}

.category-section {
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx 0;
}

.category-item {
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 30rpx;
}

.category-active {
  color: #fff;
  background-color: #3b8dff;
}

.title-input {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.content-input {
  width: 100%;
  height: 400rpx;
  font-size: 28rpx;
  line-height: 1.6;
  margin-top: 10rpx;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.image-upload {
  margin-top: 40rpx;
}

.upload-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.upload-grid {
  display: flex;
  flex-wrap: wrap;
}

.image-item,
.upload-btn {
  width: 210rpx;
  height: 210rpx;
  margin-right: 15rpx;
  margin-bottom: 15rpx;
}

.image-item {
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.remove-btn {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;

  text {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

.location-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1px solid #f0f0f0;
  margin-top: 40rpx;
}

.location-title {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;

  text {
    margin-left: 10rpx;
  }
}

.location-value {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  max-width: 60%;

  wd-icon {
    margin-left: 10rpx;
  }
}

.location-placeholder {
  font-size: 28rpx;
  color: #999;
  display: flex;
  align-items: center;

  wd-icon {
    margin-left: 10rpx;
  }
}
</style>
